<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="导入错误信息列表"
      v-model="errorBox"
      width="1000px"
      align-center
      :destroy-on-close="true"
      @close="errorBox = false"
      class="uploadErrorTable"
    >
      <el-tabs type="border-card">
        <el-tab-pane label="错误信息" v-if="errorDataList?.length > 0">
          <el-table
            ref="errorTableRef"
            :data="errorDataList"
            highlight-current-row
            border
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            />

            <!-- <el-table-column
              label="行号"
              prop="lineNo"
              min-width="100"
              show-overflow-tooltip
              align="center"
            /> -->
            <el-table-column
              label="错误信息"
              prop="error"
              min-width="400"
              show-overflow-tooltip
              align="center"
            />
          </el-table>
          <template #footer>
            <el-button
              type="primary"
              @click="
                useDownload(
                  '/mes/mesworkorder/exportError',
                  '导出错误信息表',
                  errorDataList
                )
              "
            >
              <template #icon><i-ep-download /></template>导出</el-button
            >
            <el-button @click="errorBox = false">关 闭</el-button>
          </template>
        </el-tab-pane>
        <el-tab-pane label="提示信息" v-if="promptDataList?.length > 0">
          <el-table
            ref="errorTableRef"
            :data="promptDataList"
            highlight-current-row
            border
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            />
            <!-- <el-table-column
              label="工作中心分组"
              prop="groupType"
              min-width="250"
              show-overflow-tooltip
              align="left"
            >
              <template #default="{ $index, row }">
                <span>
                  {{
                    row.groupType === 0
                      ? "落料"
                      : row.groupType === 1
                      ? "压装"
                      : row.groupType === 2
                      ? "铆接"
                      : row.groupType === 3
                      ? "焊接"
                      : row.groupType === 4
                      ? "电泳"
                      : "装配"
                  }}计划
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="工作中心"
              prop="workCenterId"
              min-width="250"
              show-overflow-tooltip
              align="left"
            >
              <template #default="{ $index, row }">
                <span>{{
                  `${row.workCenterCode}-${row.workCenterName}`
                }}</span></template
              >
            </el-table-column>
            <el-table-column
              label="总成//工序-人数-版本号"
              prop="materialId"
              min-width="250"
              show-overflow-tooltip
              align="left"
            >
              <template #default="{ $index, row }">
                <span>{{ `${row.descriptionCode}-${row.versionNo}` }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="计划数量"
              prop="planQuantity"
              min-width="140"
              show-overflow-tooltip
              align="right"
            >
              <template #default="{ $index, row }">{{
                row.planQuantity || 0
              }}</template>
            </el-table-column>

            <el-table-column
              label="生产批次"
              prop="plannedBatchId"
              min-width="100"
              show-overflow-tooltip
              align="right"
            >
              <template #default="{ $index, row }">
                <span>{{ row.planBatch }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="批次数量"
              prop="batchQuantity"
              width="85"
              show-overflow-tooltip
              header-align="center"
              align="right"
            >
              <template #default="{ $index, row }">
                <span>{{ row.batchQuantity }}</span>
              </template>
            </el-table-column> -->
            <!-- <el-table-column
              label="行号"
              prop="lineNo"
              min-width="100"
              show-overflow-tooltip
              align="center"
            /> -->
            <el-table-column
              label="提示信息"
              prop="prompt"
              min-width="400"
              show-overflow-tooltip
              align="center"
            />
          </el-table>
          <template #footer>
            <!-- <el-button
              type="primary"
              @click="
                useDownload(
                  '/mes/mesworkorder/exportError',
                  '导出错误信息表',
                  promptDataList
                )
              "
            >
              <template #icon><i-ep-download /></template>导出</el-button
            > -->
            <el-button @click="errorBox = false">关 闭</el-button>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { useDownload } from "@/utils/useTable";

const props = defineProps({
  // 错误信息列表数据
  errorDataList: {
    type: Array,
    default: () => [],
  },
  promptDataList: {
    type: Array,
    default: () => [],
  },
});

const { errorDataList, promptDataList } = toRefs(props);

const errorBox = ref(false);

defineExpose({
  errorBox,
});
</script>

<style lang="scss" scoped>
:deep(.uploadErrorTable) {
  .el-dialog__body {
    padding: 20px;
    .el-scrollbar__wrap {
      max-height: 400px;
      overflow-y: scroll;
    }
  }
}
</style>
